import { TabBar } from 'antd-mobile'
import './tabBar.less'
import fastIcon from '@/assets/images/tabbar/fast.png';
import homeIcon from '@/assets/images/tabbar/home_2.png';
import homeIconActive from '@/assets/images/tabbar/home_1.png';
import mineIcon from '@/assets/images/tabbar/my_2.png';
import mineIconActive from '@/assets/images/tabbar/my_1.png';
import { useLocation, useNavigate } from 'react-router-dom';

const pathes = ['/home', '/fast', '/mine']

export default function BottomTabBar() {
    const { pathname } = useLocation();
    const navigate = useNavigate()
    // console.log(pathes.includes(pathname))
    // const result = pathes.find(item => pathname.startsWith(item))
    // console.log(result)

    const setRouteActive = (value: string) => {
        navigate(value)
    }
    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <img src={homeIcon} />,
            activeIcon: <img src={homeIconActive} />
        },
        {
            key: '/fast',
            title: '快速刷题',
            icon: <img src={fastIcon} />,
            activeIcon: <img src={fastIcon} />
        },
        {
            key: '/mine',
            title: '我的',
            icon: <img src={mineIcon} />,
            activeIcon: <img src={mineIconActive} />
        },
    ]
    return (
        <div className='tab' style={{ display: pathes.find(item => pathname.startsWith(item)) ? 'block' : 'none' }}>
            <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={pathname === item.key ? item.activeIcon : item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}